<template>
    <div id="report" class="width-full">
        <!-- 搜索区域 -->
        <div class="main_top">
            <el-date-picker v-model="start_time" type="date" placeholder="选择日期"></el-date-picker>-
            <el-date-picker v-model="end_time" type="date" placeholder="选择日期"></el-date-picker>
            <el-button type="primary" @click="searchData()">搜索</el-button>
        </div>
        <!-- 内容区域 -->
        <table class="electron-table">
            <tr>
                <th>标题/地址</th>
                <th width="100">舆情类型</th>
                <th width="100">舆情关键词</th>
                <th width="200">发现时间</th>
                <th width="200">帖子时间</th>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td align="left">
                    <a :href="item.url" @click="openUrl($event,item.url)">{{item.title}}</a>
                </td>
                <td align="center">
                    <!-- 1正面消息 -1负面消息 0中性 2不知道类型 -->
                    <span v-if="item.type==1">正面消息</span>
                    <span v-if="item.type==-1">负面消息</span>
                    <span v-if="item.type==0">中性</span>
                    <span v-if="item.type==2">未知类型</span>
                </td>
                <td align="center">{{item.keywords}}</td>
                <td align="center">{{item.add_time | formTime}}</td>
                <td align="center">{{item.update_time | formTime}}</td>
            </tr>
        </table>
        <!--分页-->
        <div class="page text-center margin-top-20">
            <el-pagination
                background=""
                layout="prev, pager, next"
                @current-change="pageChange($event)"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import tools from "../model/tools.js";
var moment = require("moment");

export default {
  name: "report",
  data() {
    return {
      page: 1,
      start_time: "",
      end_time: "",
      list: [],
      total: 100,
      currentPage: 1
    };
  },
  filters: {
    formTime(value) {
      return moment().format("YYYY-MM-DD HH:mmss");
    }
  },
  methods: {
    //调用外部浏览器打开链接地址
    openUrl(e, url) {
      e.preventDefault();
      //调用shell  模块打开外部浏览器
      this.$electron.shell.openExternal(url);
    },
    pageChange(e) {
      this.page = e;
      this.currentPage = e;
      this.getReportData();
    },
    searchData() {
      this.page = 1;
      this.currentPage = 1;
      this.getReportData();
    },
    getReportData() {
      var userinfo = tools.storage.get("userinfo");

      var sign = tools.sign({
        a: "logList",
        uid: userinfo.id,
        salt: userinfo.salt
      });
      var api = tools.config.apiUrl + "index.php?m=Api&a=logList";

      var start_time = this.start_time
        ? moment(this.start_time).format("x") / 1000
        : "";
      var end_time = this.end_time
        ? moment(this.end_time).format("x") / 1000
        : "";
      this.$http
        .get(api, {
          params: {
            uid: userinfo.id,
            sign: sign,
            p: this.page,
            start_time: start_time,
            end_time: end_time
          }
        })
        .then(response => {
          this.list = response.data.result;
          this.total = response.data.totalPage * 10;
        })
        .catch(error => {
          this.$message({
            message: error,
            type: "warning"
          });
        });
    }
  },
  mounted() {
    //获取get传值
    console.log(this.$route.query);
    this.getReportData();
  }
};
</script>

<style lang="scss">
//全局表格

.electron-table {
  border-collapse: collapse; //给表格设置合并边框模型
  width: 100%;
}
.electron-table tr td,
.electron-table tr th {
  height: 30px;
  line-height: 30px;
  border: 1px solid #eee;
  text-align: center;
  font-size: 14px;
  padding: 5px;
}
.main_top {
  background: none repeat scroll 0 0 #fffced;
  border: 1px solid #fffced;
  line-height: 20px;
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
</style>
